@use "../../assets/scss/mixins/base" as mx;

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  background: #d9effd;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 40%, #aacce2 40%);
  background-size: 25px 60px;
  ul {
    list-style: none;
  }
}
.wrapper {
  div {
    position: absolute;
  }
  &::before {
    content: "";
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 68px;
    bottom: 0;
    background: #e2aabe;
    border-top: 9px solid #ae758a;
  }
  .desk {
    width: 990px;
    height: 100%;
    margin: auto;
    position: inherit;
    .table {
      position: absolute;
      bottom: 33px;
      z-index: 1;
      width: 898px;
      height: 297px;
      margin-left: 92px;
      transition: margin-left 1s;
      &::after,
      &::before {
        content: "";
        position: absolute;
      }
      &::before {
        background-color: #e0ceb8;
        width: 31px;
        height: 100%;
      }
      &::after {
        background-color: #ccbdac;
        width: 100%;
        height: 21px;
        box-shadow: 0 1px 7px 0 #958a7e;
      }
      .r-tb {
        position: absolute;
        right: 0;
        width: 233px;
        height: 274px;
        padding: 23px 0 0 20px;
        background-color: #e0ceb8;
        &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 5px;
          bottom: -4px;
          background-color: #ca98ab;
          border-radius: 100%;
          right: 1px;
        }
        span {
          position: relative;
          padding: 2px;
          border: 2px solid #bbaa95;
          width: 205px;
          height: 70px;
          margin-top: 10px;
          display: block;
          &::before,
          &::after {
            @include mx.pseudo();
          }
          &::before {
            background-color: #cebca7;
            // @include mx.wh(205px, 70px);
            inset: 2px;
          }
          &::after {
            background-color: #fff;
            @include mx.wh(69px, 15px);
            left: 73px;
            top: 18px;
            border-radius: 15px 15px 0 0;
            border-bottom: 2px solid #9b8b77;
          }
        }
      }
      .router {
        background-color: #424242;
        position: absolute;
        @include mx.wh(84px, 20px);
        top: -22px;
        left: 20px;
        @include mx.pseudo-ba() {
          background: #424242;
          @include mx.wh(16px, 2px);
          top: 20px;
          right: 5px;
        }
        &::after {
          right: inherit;
          left: 5px;
        }
        ul {
          position: absolute;
          @include mx.wh(4px, 31px);
          top: -35px;
          perspective: 19px;
          left: 6px;
          @include mx.pseudo-ba() {
            background-color: #424242;
          }
          &::before {
            @include mx.wh(100%, 100%);
            transform: rotateX(45deg);
            outline: 1px solid transparent;
          }
          &::after {
            @include mx.wh(8px, 8px);
            border-radius: 50%;
            left: -2px;
            top: 2px;
          }
          li {
            position: absolute;
            @include mx.wh(4px, 4px);
            background-color: #fff;
            top: 43px;

            &:first-child {
              border-radius: 50%;
              //   %dot {
              //     @include mx.wh(4px, 4px);
              //     background-color: #fff;
              //     left: 6px;
              //     border-radius: 50%;
              //   }
              @include mx.pseudo-ba() {
                @include mx.wh(4px, 4px);
                background-color: #fff;
                left: 6px;
                border-radius: 50%;
              }
              &::before {
                left: 12px;
              }
              i {
                @include mx.wh(4px, 4px);
                background-color: #fff;
                left: 6px;
                border-radius: 50%;
                left: 18px;
                position: absolute;
              }
            }
            &:last-child {
              @include mx.wh(8px, 8px);
              left: 65px;
              top: 41px;
            }
          }
        }
      }
      .imac {
        z-index: 0;
        margin-top: -274px;
        margin-left: 149px;
        @include mx.wh(289px, 175px);
        background-color: #5e5e5e;
        border: 10px solid #fff;
        border-bottom: 41px solid #fff;
        border-radius: 5px;
        transition: margin-left 1s;
        &::after {
          @include mx.pseudo();
          @include mx.wh(50px, 26px);
          top: 216px;
          left: 104px;
          background-color: #aeaeae;
          border: 20px solid #d9effd;
          border-top: 0;
          border-bottom: 20px solid #fff;
          border-radius: 5px;
          box-shadow: 0 4px 0 -2px #909090;
        }
        // img {
        //   width: 100%;
        //   height: 100%;
        // }
        .note {
          position: absolute;
          @include mx.wh(31px, 21px);
          background-color: #f9ec3e;
          bottom: -33px;
          border-top: 6px solid #cac222;
          font-size: 11px;
          text-align: center;
          padding-top: 7px;
          transform: rotate(-12deg);
          box-shadow: 0 1px 2px #dcdcdc;
        }
      }
    }
  }
  #shelf {
    top: 30px;
    right: 5%;
    width: 272px;
    float: right;
    padding: 0 30px;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 15px;
      transform: skew(20deg);
      background-color: #79a8c5;
      bottom: -23px;
      left: 2px;
    }
    &::before {
      bottom: -15px;
      right: 2px;
    }
    div {
      height: 8px;
      width: 100%;
      position: absolute;
      bottom: -8px;
      background-color: #fff;
      right: 1px;
      &::after {
        position: absolute;
        content: "";
        width: 100%;
        height: 100%;
        background-color: #79a8c5;
        bottom: -15px;
        right: -5px;
      }
    }
    ul {
      li {
        float: left;
      }
      .books {
        margin-left: 10px;
        position: relative;
        top: 4px;
        span {
          float: left;
          &:nth-child(1),
          &:nth-child(12),
          &:nth-child(4),
          &:nth-child(6) {
            width: 15px;
            height: 61px;
            background-color: #eb594a;
          }
          &:nth-child(4) {
            width: 8px;
            height: 84px;
          }
          &:nth-child(3),
          &:nth-child(7),
          &:nth-child(9) {
            width: 8px;
            height: 69px;
            background-color: #f5b400;
          }
          &:nth-child(9),
          &:nth-child(6),
          &:nth-child(5),
          &:nth-child(10) {
            width: 16px;
            height: 92px;
          }
          &:nth-child(8),
          &:nth-child(11) {
            width: 23px;
            height: 77px;
            background-color: #fff;
          }
          &:nth-child(2),
          &:nth-child(5),
          &:nth-child(10) {
            background-color: #0e3757;
          }
          &:nth-child(2) {
            width: 24px;
            height: 77px;
          }
          &:nth-child(1),
          &:nth-child(12) {
            top: 31px;
          }
          &:nth-child(2),
          &:nth-child(8),
          &:nth-child(11) {
            top: 15px;
          }
          &:nth-child(3),
          &:nth-child(7) {
            top: 23px;
          }
          &:nth-child(4) {
            top: 8px;
          }
          &:nth-child(2),
          &:nth-child(4),
          &:nth-child(5),
          &:nth-child(6),
          &:nth-child(8),
          &:nth-child(9),
          &:nth-child(10),
          &:nth-child(11) {
            &::before {
              content: "";
              display: block;
              position: absolute;
              width: 100%;
              height: 50px;
              top: 22px;
            }
          }
          &:nth-child(2) {
            &::before {
              background-color: #fff;
            }
            i {
              display: block;
              width: 0;
              height: 0;
              border: 7px solid transparent;
              border-bottom: 15px solid #f3b502;
              position: relative;
              left: 5px;
              top: 19px;
              &::after {
                content: "";
                position: absolute;
                top: 15px;
                left: -7px;
                width: 0;
                height: 0;
                border: 7px solid transparent;
                border-top: 15px solid #f3b502;
              }
            }
          }
        }
      }
    }
  }
}
